<!-- @author zhengjie -->
<template>
    <div class="data-set-box">
        <div class="set-input">
            <!-- <div >当前中心频率:{{ input_data.central }}</div> -->
            <div>
                <div class="input-head">采集宽带(KHz)：</div>
                <el-input class="zt-inputs-black " v-model="queryParams.bandwidth" placeholder="采集宽带" />
            </div>
            <!-- <div>
                <div class="input-head">采集率(KHz)：</div>
                <el-input class="zt-inputs-black " v-model="queryParams.broadband" placeholder="采集率" />
            </div> -->
            <div>
                <div class="input-head">调制方式：</div>
                <!-- <el-input class="zt-inputs-black " v-model="queryParams.mode" placeholder="调制方式" /> -->
                <el-select v-model="queryParams.mode" filterable placeholder="调制方式" class="zt-inputs-black"
                    style="width: 100px;font-weight: 600;">
                    <el-option v-for="item in  dict.type.modulate_type" :key="item.value" :label="item.label"
                        :value="item.label" />
                </el-select>

            </div>
            <div>
                <div class="input-head">频率设置(MHz)：</div>
                <el-input class="zt-inputs-black " v-model="queryParams.central" placeholder="频率设置" />
            </div>
            <div>
                <div class="input-head">modem类型：</div>
                <el-select v-model="queryParams.modem" filterable placeholder="调制方式" class="zt-inputs-black"
                    style="width: 100px;font-weight: 600;">
                    <el-option v-for="item in  dict.type.modem_type" :key="item.value" :label="item.label"
                        :value="item.label" />
                </el-select>
            </div>
            <div class="input-go" @click="go">GO</div>

            <div class="data-set-end">

            <img src="@/assets/images/yoppose.png" @click="play" class="set-icon" v-if="playCentral && playCentral == input_data.central">
            <img src="@/assets/images/yop.png" @click="play" class="set-icon" v-else>

            </div>


        </div>
        <div class="data-set-body">

            <Frequency style="width: 100%;" :inputData="input_data" height="490px" @setNumber="setNumber" :type="type">
            </Frequency>
            <Heating style="width: 100%;" height="100px" :inputData="input_data"></Heating>

        </div>
        <div class="data-set-end">
            <!-- <div class="set-ul">
                <div>同步率：80%</div>
                <div>丢包率：80%</div>
            </div>
            <div class="set-ul">
                <div>多径：100001</div>
                <div>偏移：0.01</div>
            </div> -->
            <!-- 下变频播放 -->
            <!-- <img src="@/assets/images/ypcb.png" class="set-icon" @click="go"> -->
        </div>
    </div>
</template>

<script>
import Frequency from "@/components/TZ/Frequency"
import Heating from "@/components/TZ/Heating"
export default {
    name: 'DataSet',
    components: { Frequency, Heating, },
    dicts: ['modulate_type', 'modem_type'],
    data() {
        return {
            name: '',
            open: false,
            queryParams: {
                bandwidth: 12,
                mode: "ssb",
                modem: "none",
                central: 0,
            },
            input_data: {
                central: 0,
                need_points: 0,
                points: 0,
                data: ""
            },
        }
    },
    props: {
        inputData: {
            type: Object
        },
        id: {
            type: String
        },
        type: {//1-全频段，2下变频，3浮动下变频
            type: Number,
            default: 3
        },
        // 是否启动了全频谱
        isStart: { type: Boolean, default: false},
        // 当前播放的中心频率
        playCentral: {}
    },
    watch: {
        inputData: function (val) {
            if(!val) return;
            this.input_data = val
            if (!this.queryParams.central || this.queryParams.central > 10*3) {
                this.queryParams.central = val.central/10**6;
            }
        },
    },
    mounted() {
        this.input_data = this.inputData;
    },
    methods: {
        setNumber(num) {
            // this.frequencyNum = (num / 1000).toFixed(3);
        },
        closeDialog() {//关闭回调
            const data = {
                open: false,
                central: this.input_data.central
            }
            this.$emit("closeDialog", data);
        },
        go() {
            this.$set(this.queryParams, 'id',this.id )
            let params = JSON.parse(JSON.stringify(this.queryParams))
            if(params.central) params.central *= 10**6
            if(params.bandwidth) params.bandwidth *= 10**3

            let inputData = JSON.parse(JSON.stringify(this.input_data))
            delete inputData.data;
            delete inputData.audio;
            this.$emit("go", {
                ...inputData,
                ...params
            });
        },
        play() {//播放音频
            // if(!this.isStart){
            //     this.$message.info('请先启动全频段!');
            //     return;
            // }
            let params = JSON.parse(JSON.stringify(this.input_data))
            delete params.data;
            delete params.audio;
            this.$emit("play", {...params, id: this.id});
        },
    },
    beforeDestroy() {
        console.log("销毁了:",this.id)
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.data-set-box {
    height: 100%;
    overflow-x: hidden;
}

.data-set-box::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
}

.data-set-box::-webkit-scrollbar-track {
    background-color: transparent;
}

.data-set-body {
    height: 580px;
    background: #171D2C;
    width: calc(100% - 40px);
    margin: 0 20px;
}

.data-set-end {
    // position: relative;
    margin-top: 20px;
    // right: -20px;
    // display: flex;
    // align-items: center;
    // padding: 0 20px;
    // top: -20px;
    margin-left: 20px;

    .set-icon {
        cursor: pointer;
        width: 40px;
        margin: 0 10px;
    }

    .set-ul {
        cursor: pointer;
        color: aliceblue;
        font-size: 15px;
        line-height: 25px;
        margin-right: 15px;
    }
}

.set-input {
    padding: 10px;
    display: flex;
    color: #9A9DAA;

    .input-head {
        font-size: 12px;
        margin-left: 5px;
        margin-bottom: 5px;
    }

    .zt-inputs-black {
        margin: 3px 4px;
        width: 98px;
        // height: 40px;
    }
}

.input-go {
    margin-top: 25px;
    border-radius: 50%;
    width: 30px;
    line-height: 30px;
    background: #2CA6E0;
    color: #FFF;
    height: 30px;
    text-align: center;
    cursor: pointer;
}
</style>